<template>
    <div class="rootMain">
        <div class="search-bug">
            <div class="search">
                <el-input
                    v-model="search"
                    placeholder="发票代码、号码、金额"
                    @keyup.native.enter="searchClick"
                ></el-input>
                <i class="el-icon-search" @click="searchClick"></i>
            </div>
            <div>
                <el-button
                    type="primary"
                    icon="el-icon-download"
                    size="small"
                    @click="down()"
                >
                    下载发票
                </el-button>

                <el-popover
                    placement="bottom"
                    title=""
                    width="200"
                    trigger="click"
                >
                    <div class="text-code-xzcswxxcx">去移动端录入</div>
                    <img
                        src="https://xzcs-video.oss-cn-beijing.aliyuncs.com/pc/CSWD/gh_2601955ef13f_258.jpg"
                        class="img-code-xzcswxxcx"
                        alt=""
                    />
                    <el-button
                        slot="reference"
                        type="primary"
                        icon="el-icon-document-copy"
                        size="small"
                    >
                        录入发票
                    </el-button>
                </el-popover>
            </div>
        </div>
        <div class="time-picker">
            <el-dropdown @command="command">
                <span class="el-dropdown-link">
                    {{ date_type == 1 ? "录入时间" : "开票时间"
                    }}<i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item command="1"
                        ><span
                            :style="{ color: date_type == 1 ? '#1c87f3' : '' }"
                            >录入时间</span
                        ></el-dropdown-item
                    >
                    <el-dropdown-item command="2"
                        ><span
                            :style="{ color: date_type == 2 ? '#1c87f3' : '' }"
                            >开票时间</span
                        ></el-dropdown-item
                    >
                </el-dropdown-menu>
            </el-dropdown>
            <el-date-picker
                v-model="value2"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                format="yyyy-MM-dd"
                value-format="yyyy-MM-dd"
                @change="changeDate"
            >
            </el-date-picker>
        </div>

        <div class="table">
            <el-table
                ref="multipleTable"
                :data="dataList"
                tooltip-effect="dark"
                header-row-class-name="table-header-row"
                style="width: 100%"
                border
                @selection-change="handleSelectionChange"
                @row-click="rowClick"
            >
                <el-table-column type="selection" width="55"> </el-table-column>

                <el-table-column prop="createtime" label="我的发票">
                    <template slot-scope="scope">
                        <div class="table-info">
                            <div class="info-title">
                                {{ scope.row.buyname }}
                            </div>
                            <div class="info-text">
                                <div class="info-text-left">
                                    {{ scope.row.sellname }}<br />
                                    <div
                                        class="tag"
                                        :style="{
                                            color:
                                                '#' +
                                                stateList2[scope.row.state],
                                            background:
                                                '#' +
                                                stateList2[scope.row.state] +
                                                '33',
                                        }"
                                    >
                                        {{ stateList[scope.row.state] }}
                                    </div>
                                </div>
                                <div class="info-text-right">
                                    ￥{{ scope.row.money_count }}
                                    <div class="date">
                                        {{ scope.row.createtime }}
                                    </div>
                                </div>
                                <div class="arrow-right">
                                    <i class="el-icon-arrow-right"></i>
                                </div>
                            </div>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div v-if="all_count > limit" class="pagination">
            <el-pagination
                background
                layout="prev, pager, next"
                :total="all_count"
                :page-size="limit"
                :current-page.sync="page"
                @current-change="changePage"
            >
            </el-pagination>
        </div>
        <el-dialog
            title="请输入接收邮箱"
            :visible.sync="dialogFormVisible"
            width="462px"
        >
            <el-form :model="form">
                <el-form-item label="" label-width="0">
                    <el-input
                        v-model="form.email"
                        autocomplete="off"
                    ></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false" size="mini">
                    取消
                </el-button>
                <el-button type="primary" @click="editEmail" size="mini">
                    确定
                </el-button>
            </div>
        </el-dialog>

        <el-dialog title="发票详情" :visible.sync="detailsShow" width="980px">
            <div class="detail">
                <el-collapse v-if="billResult" v-model="activeNames">
                    <div class="el-collapse-item__header">
                        发票类型：{{
                            invoiceTypeList[billResult.invoices_type_id]
                        }}
                    </div>
                    <div class="el-collapse-item__header">
                        发票状态：{{ stateList[billResult.state] }}
                    </div>
                    <div class="el-collapse-item__header">
                        发票号码：{{ billResult.num }}
                    </div>
                    <div class="el-collapse-item__header">
                        开票日期：{{ billResult.billingdate }}
                    </div>
                    <el-collapse-item
                        :title="`价税合计：${billResult.money}`"
                        name="1"
                    >
                        <div class="moeny-list">
                            <div class="moeny-item">
                                金额
                                <div>￥{{ billResult.money_count }}</div>
                            </div>
                            <div class="moeny-item">
                                税率
                                <div>{{ billResult.rate }}</div>
                            </div>
                            <div class="moeny-item">
                                税额
                                <div>￥{{ billResult.ratemoney }}</div>
                            </div>
                        </div>
                    </el-collapse-item>
                    <el-collapse-item
                        :title="`购买方：${billResult.buyname}`"
                        name="2"
                    >
                        <div class="company-info">
                            <div
                                class="company-item"
                                style="margin-bottom: 16rpx"
                            >
                                纳税人识别号
                                <div>
                                    {{
                                        billResult.buynumber
                                            ? billResult.buynumber
                                            : "--"
                                    }}
                                </div>
                            </div>
                            <div
                                class="company-item"
                                style="margin-bottom: 16rpx"
                            >
                                地址及电话
                                <div>
                                    {{
                                        billResult.purchaseraddressphone
                                            ? billResult.purchaseraddressphone
                                            : "--"
                                    }}
                                </div>
                            </div>
                            <div class="company-item">
                                开户银行及账号
                                <div>
                                    {{
                                        billResult.purchaserbank
                                            ? billResult.purchaserbank
                                            : "--"
                                    }}
                                </div>
                            </div>
                        </div>
                    </el-collapse-item>
                    <el-collapse-item
                        :title="`销售方：${billResult.sellname}`"
                        name="3"
                    >
                        <div class="company-info">
                            <div
                                class="company-item"
                                style="margin-bottom: 16rpx"
                            >
                                纳税人识别号
                                <div>
                                    {{
                                        billResult.sellnumber
                                            ? billResult.sellnumber
                                            : "--"
                                    }}
                                </div>
                            </div>
                            <div
                                class="company-item"
                                style="margin-bottom: 16rpx"
                            >
                                地址及电话
                                <div>
                                    {{
                                        billResult.salesaddressphone
                                            ? billResult.salesaddressphone
                                            : "--"
                                    }}
                                </div>
                            </div>
                            <div class="company-item">
                                开户银行及账号
                                <div>
                                    {{
                                        billResult.salesbank
                                            ? billResult.salesbank
                                            : "--"
                                    }}
                                </div>
                            </div>
                        </div>
                    </el-collapse-item>
                    <div class="el-collapse-item__header">
                        录入时间：{{ createDate }}
                    </div>
                    <div class="el-collapse-item__header">
                        报销人：{{ billResult.reimburser }}
                    </div>
                    <div class="el-collapse-item__header">
                        备注：{{ billResult.remark }}
                    </div>
                </el-collapse>
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button
                    type="primary"
                    size="small"
                    @click="previewImg([original])"
                >
                    预览
                </el-button>
            </div>
        </el-dialog>

        <el-image
            class="my-img"
            v-show="false"
            ref="myImg"
            src=""
            :preview-src-list="previewList"
        >
        </el-image>
    </div>
</template>

<script>
import {
    invoices_invoiceslist_new,
    invoices_invoiceslistinfo,
} from "@/assets/api/indexApi";
import moment from "moment";
import { mapState, mapActions } from "vuex";
import { editUserInfo } from "@/assets/api/userCenterApi.js";

export default {
    name: "taxcount",
    props: {
        item: {
            type: Object,
            default: () => {
                return {};
            },
        },
    },
    data() {
        return {
            previewList: [], // 图片预览
            date_type: "1",
            search: "",

            value2: [
                moment().subtract(8, "days").format("YYYY-MM-DD"),
                moment().format("YYYY-MM-DD"),
            ],

            form: {
                email: "",
            },
            dialogFormVisible: false,

            multipleSelection: [],
            dataList: [],
            all_count: 0,
            limit: 10,
            page: 1,

            stateList: {
                1: "正常",
                2: "作废",
                3: "红冲",
                7: "部分红冲",
                8: "全额红冲",
            },

            stateList2: {
                1: "37A03D",
                2: "FF0000",
                3: "FFC234",
                7: "F86910",
                8: "FF5405",
            },
            invoiceTypeList: {
                1: "增值税专用发票",
                2: "货运运输业增值税专用发票",
                3: "机动车销售统一发票",
                4: "增值税普通发票",
                8: "增值税专用发票（电子）",
                9: "电子发票(增值税专用发票)",
                10: "增值税普通发票（电子）",
                11: "增值税普通发票（卷式）",
                14: "增值税普通发票（通行费）",
                15: "二手车统一销售发票",
                21: "区块链发票",
                36: "通用电子发票",
                61: "电子发票（航空运输电子客票行程单）",
                62: "电子发票（铁路电子客票）",
                83: "电子发票(普通发票)",
                91: "全电纸票(增值税专用发票）",
                92: "全电纸票(普通发票)",
                93: "全电纸票(机动车销售统一发票)",
                94: "全电纸票(二手车销售统一发票)",
            },

            detailsShow: false,
            activeNames: [],

            billResult: null,
            createDate: "",
            original: "",
        };
    },
    computed: {
        ...mapState("common", {
            userInfo: (state) => state.userInfo,
        }),
    },
    watch: {},
    created() {},
    mounted() {
        this.getdata();
    },
    methods: {
        ...mapActions("common", ["getUserInfo2"]),
        async getdata() {
            console.log(this.value2);
            const res = await invoices_invoiceslist_new({
                sdate: this.value2[0] + " 00:00:00",
                edate: this.value2[1] + " 23:59:59",
                page: this.page,
                pagesize: this.limit,
                date_type: this.date_type,
                search: this.search,
            });
            if (res.code == 1) {
                this.dataList = res.data;
                if (res.data.length > 0) this.all_count = res.data[0].all_count;
                else this.all_count = 0;
            }
        },

        async rowClick(row) {
            const res = await invoices_invoiceslistinfo({
                id: row.id,
            });
            if (res.code == 1) {
                this.billResult = res.data[0];
                let data = res.data[0];

                this.createDate = data.createtime;
                this.original = data.original;

                this.$nextTick(() => {
                    this.detailsShow = true;
                });
            }
        },

        changePage(page) {
            this.page = page;

            this.getdata();
        },

        command(e) {
            this.date_type = e;
            this.page = 1;
            this.getdata();
        },

        async down(is = true) {
            if (this.dataList.length == 0) {
                this.$alert("暂无可下载发票", "提示", {
                    confirmButtonText: "确定",
                });
                return;
            }
            if (!this.userInfo.email && is) {
                // this.$confirm("下载发票功能需要设置邮箱", "提示", {
                //     confirmButtonText: "前往设置",
                //     cancelButtonText: "取消",
                // })
                //     .then(() => {
                //         this.$router.push({
                //             path: "/user/myset",
                //         });
                //     })
                //     .catch(() => {});
                this.dialogFormVisible = true;
                return;
            }
            let list = "";
            console.log(this.multipleSelection);
            if (this.multipleSelection.length > 0) {
                for (let item of this.multipleSelection) {
                    if (list) list += ",";
                    list += item.id + "";
                }
            } else {
                return;
            }
            console.log(list);
            const res = await invoices_invoiceslist_new({
                check_id: list,
                is_export: 1,
            });
            if (res.code == 1) {
                this.$alert("已发送至绑定邮箱", "提示", {
                    confirmButtonText: "确定",
                });
            }
        },

        async editEmail() {
            if (!this.form.email) {
                this.$message({
                    message: "请输入接收邮箱",
                    type: "warning",
                });
                return;
            }
            const res = await editUserInfo(this.form);
            if (res.code == 1) {
                this.$message({
                    message: "修改成功",
                    type: "success",
                });
                this.dialogFormVisible = false;

                this.down(false);
            }
        },

        handleSelectionChange(val) {
            this.multipleSelection = val;
        },

        changeDate() {
            this.page = 1;
            this.getdata();
        },

        searchClick() {
            this.page = 1;
            this.getdata();
        },

        // 预览图片
        previewImg(imgs) {
            this.previewList = imgs;
            this.$nextTick(() => {
                this.$refs.myImg.showViewer = true;
            });
        },
    },
};
</script>

<style lang="scss" scoped>
.rootMain {
    padding: 20px 22px;
}

.search-bug {
    display: flex;
    align-items: center;
    justify-content: space-between;
    .search {
        padding-left: 31px;
        padding-right: 24px;
        background: #eeeef0;
        width: 311px;
        height: 36px;
        display: flex;
        align-items: center;
        border-radius: 60px;
        i {
            color: #666666;
            font-size: 21px;
        }
    }
    &::v-deep .el-input__inner {
        border-width: 0;
        background-color: transparent;
    }
}

.time-picker {
    display: flex;
    align-items: center;
    margin: 15px 0;
    .el-dropdown-link {
        font-weight: 400;
        font-size: 16px;
        color: #333333;
        margin-right: 30px;
        cursor: pointer;
    }
}

.pagination {
    text-align: center;
    padding-top: 30px;
}

.text-code-xzcswxxcx {
    text-align: center;
    font-size: 12px;
    color: #333333;
    padding-bottom: 5px;
}

.img-code-xzcswxxcx {
    height: 100%;
    width: 100%;
}

::v-deep .el-table-column--selection .cell {
    padding-left: 10px;
}

::v-deep .el-table th.el-table__cell {
    background: #1c87f3;
    color: #fff;
}

.dialog-footer {
    text-align: right;
    margin: 0;
}
::v-deep .el-button--primary span {
    color: #fff;
}
::v-deep .el-form-item {
    margin-bottom: 0;
}

.table-info {
    .info-title {
        font-weight: 400;
        font-size: 18px;
        color: #333333;
        padding-bottom: 15px;
        border-bottom: 1px solid #ebeef5;
    }
    .info-text {
        padding-top: 15px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .info-text-left {
            width: 100%;
            font-weight: 400;
            font-size: 18px;
            color: #333333;
            .tag {
                height: 25px;
                line-height: 25px;
                padding: 0 12px;
                // background: rgba(55, 160, 61, 0.2);
                border-radius: 6px;
                font-weight: 350;
                font-size: 16px;
                // color: #37a03d;
                display: inline-block;
                margin-top: 14px;
            }
        }
        .info-text-right {
            min-width: 170px;
            text-align: right;
            font-weight: 500;
            font-size: 26px;
            color: #333333;
            .date {
                font-weight: 350;
                font-size: 18px;
                color: #333333;
                margin-top: 10px;
            }
        }
        .arrow-right {
            padding-left: 10px;
            color: #666666;
            font-size: 24px;
        }
    }
}

.moeny-list {
    display: flex;
    align-items: center;
    justify-content: space-around;
}

.moeny-item {
    width: 80px;
    font-weight: 350;
    font-size: 14px;
    color: #999999;
    text-align: center;
}

.moeny-item div {
    padding-top: 8px;
    color: #333333;
}

.company-list {
}

.company-item {
    font-weight: 350;
    font-size: 12px;
    color: #999999;
}

.company-item div {
    font-size: 13px;
    color: #333333;
}

.detail {
    height: 483px;
    overflow-y: auto;
}
</style>
